<template>
    <van-popup v-model="showPop">
        <div class="con">
            <div class="title">{{title}}</div>
            <van-field v-model="mobilePhone" label="手机号" placeholder="请输入手机号" />
            <div class="butt">
                <van-button type="info" size="large" @click="nextStep">添加</van-button>
            </div>
        </div>
    </van-popup>
</template>

<script>

export default {
    props: ['title'],

    data() {
        return {
            showPop: false,
            mobilePhone: "",
        }
    },

    methods: {

        // 
        show() {
            this.showPop = true
        },

        hide() {
            this.showPop = false
        },

        // 
        nextStep() {
            this.$emit("commit", this.mobilePhone);
        }
    }
}

</script>

<style lang="scss" scoped>
.con {
    width: 340px;
    background-color: #ffffff;
    padding: 20px;

    .title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        text-align: center;
        padding-bottom: 20px;
    }

    .inp {
        text-align: center;
        & > input {
            width: 80%;
            text-align: center;
            padding: 6px 20px;
            font-weight: bold;
            font-size: 24px;
            border: 1px solid #f0f0f0;
        }
    }
    .butt {
        padding: 20px 0;
    }
}
</style>